<template>
  <div>
    <div>
      <h2>车型管理</h2>
    </div>
    <div>
      <el-form ref="form" :model="form" label-width="100%">
        <div class="one">
          <span>
            <el-form-item label="车型编号" label-width="350px">
              <el-input
                v-model="form.id"
                placeholder="请输入车型编号"
              ></el-input>
            </el-form-item>
          </span>
          <span>
            <el-form-item label="应载数量" label-width="350px">
              <el-select
                v-model="form.allowableLoad"
                placeholder="请选择应载数量"
              >
                <el-option
                  v-for="i in [
                    '<1.8(吨)',
                    '1.8-6(吨)',
                    '6-14(吨)',
                    '14-30(吨)',
                    '30-50(吨)',
                    '50-100(吨)',
                    '100>(吨)'
                  ]"
                  :key="i"
                  :label="i"
                  :value="i"
                />
              </el-select>
            </el-form-item>
          </span>
          <span>
            <el-form-item label="应载体积" label-width="350px">
              <el-select
                v-model="form.allowableVolume"
                placeholder="请选择应载体积"
              >
                <el-option
                  v-for="i in [
                    '<3(m³)',
                    '3-5(m³)',
                    '5-10(m³)',
                    '10-15(m³)',
                    '15-30(m³)',
                    '30-50(m³)',
                    '50-80(m³)',
                    '60-150(m³)',
                    '150>(m³)'
                  ]"
                  :key="i"
                  :label="i"
                  :value="i"
                />
              </el-select>
            </el-form-item>
          </span>
        </div>
        <div class="one">
          <span>
            <el-form-item label="车辆类型" label-width="350px">
              <el-input
                v-model="form.name"
                placeholder="请输入车辆类型"
              ></el-input>
            </el-form-item>
          </span>
          <button class="sousuo" @click="sousuo">搜索</button>
          <button class="chongzhi" @click="chongzhi">重置</button>
        </div>
      </el-form>
    </div>
    <!-- 车辆详情 -->
    <div class="listStr">
      <!-- 车辆详情 -->
      <button class="buttonList" @click="xinzeng">新增车型</button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="车型编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="车辆类型" width="180">
        </el-table-column>
        <el-table-column prop="num" label="车型数量"> </el-table-column>
        <el-table-column prop="allowableLoad" label="应载重量(吨)">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="应载体积(立方米)">
        </el-table-column>
        <el-table-column prop="measureLong" label="长(米)"> </el-table-column>
        <el-table-column prop="measureWidth" label="宽(米)"> </el-table-column>
        <el-table-column prop="measureHigh" label="高(米)"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button class="bianji" @click="bianji({ row })">编辑</el-button>|
            <el-button class="shanchu" type="primary">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          :current-page="page"
          :page-sizes="[1, 2, 3, 4, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 编辑弹层 -->
    <el-dialog
      title="编辑"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <el-form
        :model="list"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="车辆类型" prop="name">
          <el-input
            type="text"
            v-model="list.name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="应承重量" prop="allowableLoad">
          <el-input
            type="text"
            v-model="list.allowableLoad"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="应承体积" prop="allowableVolume">
          <el-input type="text" v-model="list.allowableVolume"></el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input type="text" v-model="list.measureLong"></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input type="text" v-model="list.measureWidth"></el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input type="text" v-model="list.measureHigh"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button class="queding" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增车形 -->
    <el-dialog
      title="新增"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <el-form
        :model="lists"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="车辆类型" prop="name">
          <el-input
            type="text"
            v-model="lists.name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="应承重量" prop="allowableLoad">
          <el-input
            type="text"
            v-model="lists.allowableLoad"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="应承体积" prop="allowableVolume">
          <el-input type="text" v-model="lists.allowableVolume"></el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input type="text" v-model="lists.measureLong"></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input type="text" v-model="lists.measureWidth"></el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input type="text" v-model="lists.measureHigh"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button class="queding" @click="qudcx" type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { informationlastApi, addinformationlastApi } from '@/api/vehicle'
export default {
  data() {
    return {
      form: {
        id: '',
        allowableLoad: '',
        allowableVolume: '',
        name: ''
      },
      total: 0, // 数据总数
      page: 1,
      pageSize: 5,
      tableData: [],
      list: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '',
        measureWidth: '',
        measureHigh: ''
      },
      lists: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '',
        measureWidth: '',
        measureHigh: ''
      },
      dialogVisible: false // 添加子部门弹窗状态//默认关闭
    }
  },
  async created() {
    // this.infoList()
    this.infoLast()
  },
  methods: {
    // async infoList() {
    //   const { data } = await informationListApi()
    //   this.tableData = data.data
    //   console.log(this.tableData)
    // },
    async infoLast() {
      const { data } = await informationlastApi(this.page, this.pageSize)
      this.tableData = data.data.items
      console.log(data.data.items)
    },
    onSubmit() {
      this.dialogVisible = true
      console.log('submit!')
    },
    //点击重置按钮
    chongzhi() {
      this.form = {
        id: '',
        allowableLoad: '',
        allowableVolume: '',
        name: ''
      }
      this.infoList()
    },
    //搜索页面
    sousuo() {
      // this.infoLast(this.form.id, this.formallowableLoad)
      const res = this.tableData.filter((item) => {
        if (item.id == this.form.id) {
          return item.id == this.form.id
        } else if (item.allowableLoad <= this.form.allowableLoad) {
          return item.allowableLoad <= this.form.allowableLoad
        } else if (item.allowableVolume <= this.form.allowableVolume) {
          return item.allowableVolume <= this.form.allowableVolume
        } else if (item.name == this.form.name) {
          return item.name <= this.form.name
        }
      })
      console.log(res)
      this.tableData = res
    },
    //编辑页面
    bianji(rows) {
      const { row } = rows
      console.log(row)
      this.dialogVisible = true
      this.list = row
    },
    async tianjia() {
      const res = await addinformationlastApi(this.lists)
      console.log(res)
    },
    //新增车型
    xinzeng() {
      this.dialogVisible = true
      console.log(111)
    },
    //点击确定添加
    qudcx() {
      this.tianjia()
    },
    // 每页条数变化了，切换了每页的条数
    handleSizeChange(val) {
      this.pageSize = val
      // 切换每页条数时，让页码回归到第一页
      this.page = 1
      console.log(`每页 ${val} 条`)
    },
    // 当前页变化，改变当前页触发执行
    handleCurrentChange(val) {
      this.page = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style scoped>
.buttonList {
  width: 150px;
  height: 50px;
  background-color: #e15536;
  color: #fff;
  border: 0;
  border-radius: 5px;
  margin: 30px 10px;
}
.listStr {
  border: 1px solid rgba(244, 227, 227, 0.979);
}
.one span {
  float: left;
  margin-left: -210px;
}
.one {
  overflow: hidden;
}
.sousuo {
  margin-left: 70px;
  background-color: #e15536;
  color: #fff;
  width: 100px;
  height: 40px;
  border: 0;
  border-radius: 5px;
}
.chongzhi {
  width: 100px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  margin-left: 20px;
}
.bianji {
  padding: 15px;
  color: #419eff;
  border: 0;
  background-color: #fff;
}
.shanchu {
  padding: 15px;
  color: #f76c6c;
  border: 0;
  background-color: #fff;
}
.bottom {
  margin-left: 420px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.queding {
  background-color: #e15536;
  border: 0;
}
</style>